<template>
  <div class="playlist">
     <div class="playlist__sony">
          <i class="iconfont iconriqi">
            <span>推荐歌单</span>
          </i>
          <span class="playlist__more">
            <i class="iconfont iconyoujian"></i>
          </span>
        </div>
        <div class="playlist__yinyuetu">
          <ul>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
             <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
          </ul>
        </div>
  </div>
</template>

<script>
export default {
  name: 'playlist'
}
</script>

<style lang="scss">
  .playlist__sony {
        display: flex;
        height: 64px;
        justify-content: space-between;
        padding: 0 12px 0 12px;
        line-height: 64px;
        .iconfont {
          font-size: 24px;
          color: rgb(247, 55, 55);
        }
        span {
          font-size: 26px;
          color: #000;
          padding-left: 8px;
        }
        .playlist__more {
          font-size: 22px;
          color: rgb(48, 47, 47);
          .iconfont {
            font-size: 30px;
          }
        }
      }
      .playlist__yinyuetu {
        width: 100%;
        height: 314px;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          padding: 0px 5px;
          li {
            width: 47%;
            font-size: 10px;
            padding-bottom: 5px;
            img {
              height: 128px;
              width: 100%;
              padding-bottom: 6px;
            }
          }
        }
      }
</style>
